<template>
  <div id="app">
    <nav>
      <el-menu router :default-active="$route.path" mode="horizontal">
        <el-menu-item route index="/home">
          合工大精品课程网站
        </el-menu-item>
        <el-menu-item class="nav-input">
          <el-input
            class="nav-input-item"
            size="small"
            placeholder="搜索"
            v-model="searchText"
          ></el-input>
        </el-menu-item>

        <div class="float-right" v-if="loginSuccess === false">
          <el-menu-item route index="/teacher">
            教师信息
          </el-menu-item>
          <el-menu-item route @click="loginForm = true">
            登录
          </el-menu-item>
          <el-menu-item route @click="signupForm = true">
            注册
          </el-menu-item>
        </div>

        <div class="float-right" v-if="loginSuccess === true">
          <el-submenu index="">
            <template slot="title">{{ form.name }}</template>
            <el-menu-item index="">用户信息</el-menu-item>
            <el-menu-item index="2" @click="signout">注销</el-menu-item>
          </el-submenu>

        </div>
        <!--          <router-view></router-view>-->
      </el-menu>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </nav>

    <el-row>
      <el-col :span="4"> <sidebar></sidebar></el-col>
      <el-col :span="20"><homecourses></homecourses></el-col>
    </el-row>
    <!--登录模态框-->
    <el-dialog title="登录" :visible.sync="loginForm">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
          label="邮箱"
          prop="email"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="form.yzm"></el-input><img id="yzm" src="" /><a
            href="javascript:;"
            class="change"
            style="font-size:14px;"
            >看不清？换一张</a
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="loginForm = false">取 消</el-button>
        <el-button type="primary" @click="studentlogin">确 定</el-button>
      </div>
    </el-dialog>
    <!--注册模态框-->
    <el-dialog title="注册" :visible.sync="signupForm">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="form.yzm"></el-input><img id="yzm" src="" /><a
            href="javascript:;"
            class="change"
            style="font-size:14px;"
            >看不清？换一张</a
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="signupForm = false">取 消</el-button>
        <el-button type="primary" @click="studentsignup">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Homecourses from "@/views/HomeCourses";
const axios = require(`axios`);
const url = require(`./config/config`).dev.localurl;
import Sidebar from "@/views/IndexSideBar";
export default {
  name: `app`,
  components: { Homecourses, Sidebar },
  data() {
    return {
      loginSuccess: false,
      dialogTableVisible: false,
      signupForm: false,
      loginForm: false,
      form: {
        name: `鞠婧祎`,
        email: `1@11.com`,
        region: ``,
        password: `1`,
        desc: ``
      },
      formLabelWidth: `120px`,
      searchText: ``
    };
  },
  created() {
    let username = localStorage.getItem(`username`);
    let password = localStorage.getItem(`password`);
    if (username && password) {
      this.loginSuccess = true;
    }
  },
  methods: {
    changeLogin() {},
    signout() {
      axios({
        url: url + `/login/logout`,
        method: `get`
      })
        .then(res => {

          this.loginSuccess = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    studentsignup() {
      axios({
        url: url + `/login/register`,
        method: `post`,
        data: this.form
      })
        .then(res => {
          this.loginSuccess = true;
          this.signupForm = false;
          localStorage.setItem(`username`, this.form.name);
          localStorage.setItem(`email`, this.form.email);
          localStorage.setItem(`password`, this.form.password);
          console.log(res.data.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    studentlogin() {
      axios({
        url: url + `/login/stu`,
        method: `post`,
        data: this.form
      })
        .then(res => {
          if (res.data.success) {
            this.loginSuccess = true;
            this.loginForm = false;this.form.name=res.data.data.name
            localStorage.setItem(`username`, this.form.name);
            localStorage.setItem(`email`, this.form.email);
            localStorage.setItem(`password`, this.form.password);
            console.log(`ressuccess`, res.data);
          } else {
            this.loginForm = false;
            alert(res.data.message);
          }
        })
        .catch(error => {
          console.log(error);
          alert(error.message);
        });
    }
  }
};
</script>

<style>
a {
  text-decoration: none;
}
.nav-input-item {
  width: 100%;
  margin: 0 100px;
}
.float-right {
  display: inline-flex;
  height: inherit;
  float: right;
}

.nav-input {
  text-decoration: none;
  border: none !important;
  /*width: 300px;*/
  margin: 0.3em auto;
  padding: auto;
}

.el-dropdown-link {
  float: right;
}
</style>
